<template>
  <div>
    <el-row
    :gutter="10"
      class="fl-alc flex center mb-10"
      v-for="(item, index) in phonelist"
      :key="index"
     
    >
      <el-col :xs="8" :sm="6" :md="4" :lg="4" :xl="3"  @click.native="setPhone(item)"
        ><div class="grid-content bg-blue">
          {{ phonelistType == 1 ? "按键" : "" }}{{ index + 1 }}
        </div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="4"  @click.native="setPhone(item)"
        ><div class="grid-content bg-light">{{ item.name }}</div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="8"  @click.native="setPhone(item)"
        ><div class="grid-content bg-light">{{ item.phone }}</div></el-col
      >
    </el-row>
    <el-row v-if="phonelistType == 1" :gutter="10" class="fl-alc flex center"
      >注：亲情号码设置分别对应设备的快捷拨号键，设置好号码，信息会同步到设备上。
    </el-row>
    <el-dialog
      v-if="setPhoneVisible"
      :title="phonelistType == 1 ? `亲情号码${status}` : `SOS号码${status}`"
      :visible.sync="setPhoneVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
      width="500px"
    >
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="numberValidateForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="numberValidateForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('numberValidateForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "phoneList",
  data() {
    const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      setPhoneVisible: false,
      setPhoneTitle: "",
      phonelist: [{ pressKey: 1 }, { pressKey: 2 }, { pressKey: 3 }],
      numberValidateForm: {
        phone: "",
        name: "",
      },
      rules: {
        phone: [{ required: true, validator: validatePass, trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名" }],
      },
      pressKey: "",
      status: "",
    };
  },
  props: {
    phonelistNumber: {
      type: String,
      default: "",
    },
    phonelistType: {
      type: Number,
      default: "",
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$get("fireFightingIOT/device/sosAddressBookList", {
        number: this.phonelistNumber,
        type: this.phonelistType,
      }).then((res) => {
        res.data.forEach((item) => {
          const index = this.phonelist.findIndex(
            (phoneItem) => phoneItem.pressKey === item.pressKey
          );
          if (index !== -1) {
            this.$set(this.phonelist, index, item);
          }
        });
      });
    },
    setPhone(val) {
      const { name, phone, pressKey, id } = val;
      this.numberValidateForm.name = name;
      this.numberValidateForm.phone = phone;
      this.numberValidateForm = Object.assign(this.numberValidateForm, {
        name,
        phone,
        ...(id && { id }), /// 只在 id 存在时传递该参数
        pressKey,
      });
      this.status = this.numberValidateForm.phone ? "编辑" : "添加";
      this.setPhoneVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const newData = this.phonelist.map((item) => {
            if (item.pressKey === this.numberValidateForm.pressKey) {
              return {
                mobile: this.numberValidateForm.phone,
                nickName: this.numberValidateForm.name,
                shortcut: this.numberValidateForm.pressKey,
              };
            } else {
              return {
                mobile: item.phone,
                nickName: item.name,
                shortcut: item.pressKey,
              };
            }
          });
          const params = {
            number: this.phonelistNumber,
            type: this.phonelistType,
            ...this.numberValidateForm,
            data: [...newData],
          };
          params.data = params.data.filter(
            (item) => item.nickName !== undefined
          );
          this.$post("/fireFightingIOT/device/addOrUpdateBook", {
            ...params,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("操作成功");
              this.setPhoneVisible = false;
              this.getList();
            } else {
              this.$message.success("操作失败");
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      Object.assign(this.numberValidateForm, { phone: "", name: "" });
    },
  },
};
</script>

<style lang="less" scoped>
.el-col {
  border-radius: 4px;
}
.bg-blue {
  text-align: center;
  background: #1b72dc;
}
.bg-light {
  background: #e5e9f2;
  padding: 0 15px;
  color: #000;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}
.demo-ruleForm {
  width: 60% !important;
}
/deep/.el-dialog__body {
  display: flex !important;
  justify-content: center !important;
}
</style>
